<template>
  <!-- 救援金 -->
  <div class="information-content-h5">
    <h1 class="information-content-h5__title">
      <h3 @click="goBack"><i-teenyicons-arrow-left-solid /> {{ title }}</h3>
      <h4 @click="openLotteryRecord"><i-tabler-filter-edit />{{ t("lotteryRecord.text31") }}</h4>
    </h1>
    <div class="lottery-box-h5-nav">
      <ZTab
        v-model:navs="lotteryNav"
        v-model:active="lotteryActive"
        layout="left"
        @change="handleLotteryType"
      />
    </div>
    <div class="lottery-box-wrapper">
      <p>{{ t("lotteryRecord.gifts01") }}</p>
      <p>{{ t("lotteryRecord.gifts02") }}</p>
      <h6>{{ parseTime(activity.lotteryStartTime) }} — {{ parseTime(activity.lotteryEndTime) }}</h6>
      <Lottery @queryData="queryData"/>
    </div>

    <div class="lottery-info">
      <ul class="lottery-info-ul">
        <li>
          {{ t("lotteryRecord.text32") }}
          <span>{{ piniaUserinfo.getUserinfo.user.userName }}</span>
        </li>
        <li>
          {{ t("lotteryRecord.text33") }}
          <span>{{ lotteryUser.num }}</span>
        </li>
      </ul>
      <h1 class="ltit">{{ t("lotteryRecord.text37") }}</h1>
      <div class="lottery-info-list">
        <h2>
          <div>{{ t("userData.hjsj") }}</div>
          <div>{{ t("UserInfo.Nickname") }}</div>
          <div>{{ t("WALLET.activity04") }}</div>
        </h2>
        <div class="lottery-info-list-box">
          <div class="lottery-info-list-wrapper">
            <z-swiper
              v-if="showSwiper"
              :list="list"
              :skeletonNumber="1"
              :spaceBetween="10"
              :slidesPerView="7"
              :playTime="1"
              :loop="false"
              :horizontal="false"
              type="lotterylist"
            ></z-swiper>
          </div>
        </div>
      </div>
    </div>
    <h1 class="ltit ltit2">{{ t("vip.Explain") }}</h1>
    <div class="lottery-information" v-html="activity.content"></div>
  </div>
  <Dialog
    v-model:visible="dialogConfig.show"
    v-model:title="dialogConfig.title"
    :width="dialogConfig.width"
    v-model:autoHeight="dialogConfig.autoHeight"
    v-model:hiddenTitle="dialogConfig.hiddenTitle"
    :headerFixed="dialogConfig.headerFixed"
  >
    <LotteryRecordH5 v-model:title="dialogConfig.title" @back="back"/>
  </Dialog>
</template>

<script setup lang="ts" name="LotteryBoxH5">
import lotteryApi from '@/api/modules/lottery';
import nocache from '@/store/nocache';
import userinfo from '@/store/userinfo';
import { parseTime } from '@/utils/format';

const { t } = useI18n();
const emits = defineEmits(['back']);
const piniaUserinfo:any = userinfo();
const piniaNocache = nocache();
const props = defineProps({
  title: {
    type: String,
    default: ""
  }
});

const data:any = reactive({
  lotteryNav: [],
  lotteryActive: 0,
  list: [],
  lotteryUser: {},
  activity: {},
  showSwiper: false,
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    hiddenTitle: true,
    width: '100%',
    autoHeight: false
  },
});

const {
  lotteryNav,
  lotteryActive,
  list,
  lotteryUser,
  activity,
  showSwiper,
  dialogConfig,
} = toRefs(data);

const lotteryList = () => {
  lotteryApi.lotteryList({
    activityId: activity.value.activityId,
  }).then((response:any) => {
    if (response.code == 200) {
      list.value = response.rows || [];
      nextTick(()=>{
        showSwiper.value = true;
      })
    }
  })
}

const back = () => {
  dialogConfig.value.show = false;
}

const openLotteryRecord = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.title = t('lotteryRecord.text31'); // 规则
}

// 抽奖转盘的navs切换
const handleLotteryType = (result:any) => {
  piniaNocache.setLotteryActive(result.nav.active || 0);
}

const queryData = (result:any) => {
  lotteryUser.value = result.lotteryUser;
  activity.value = result.activity;
  lotteryNav.value = result.navs;
  lotteryList();
}

const goBack = () => {
  emits('back');
}
</script>

<style lang="scss" scoped>
@import url(./index.scss);
.lottery-box-h5-nav{
  padding: var(--rem-15) var(--rem-10);
}
.lottery-box-wrapper{
  width: 80%;
  margin: 0 auto 0;
  p{
    text-align: center;
    font-weight: 1000;
    font-size: var(--rem-24);
    line-height: var(--rem-29);
    text-transform: uppercase;
    background: linear-gradient(180deg,#f6841b 46.88%,#f69e1b 46.89%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }
  h6{
    text-align: center;
    margin-top: var(--rem-10);
    font-weight: 500;
  }
}

.lottery-info{
  flex: 1;
  background: var(--z-bg-def);
  border-radius: 20rem;
  border: 1.5px solid var(--border-prm);
  margin: var(--rem-10);
  padding: var(--rem-10);
  box-sizing: border-box;
  .lottery-info-ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
    li{
      width: 48%;
      height: 100%;
      border-radius: var(--rem-16);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      padding: var(--rem-24);
      box-sizing: border-box;
      color: var(--z-font-white);
      color: rgba($color: #ffffff, $alpha: 0.6);
      span{
        font-weight: 600;
        font-size: var(--rem-16);
        color: white;
      }
      &:first-child{
        background: linear-gradient(283.67deg, #5403AC 16.42%, #8435CC 99.64%);
      }
      &:last-child{
        background: linear-gradient(101.16deg, #D04394 8.16%, #DF374B 91.99%);
      }
    }
  }
}
h1.ltit{
  font-weight: 600;
  font-size: var(--rem-16);
  color: var(--z-font-anti);
  text-align: left;
  line-height: 1;
  margin: var(--rem-20) 0px var(--rem-10) 0px;
  &.ltit2{
    padding: 0 var(--rem-20);
  }
}
.lottery-info-list{
  margin-top: var(--rem-20);
  width: 90%;
  margin: var(--rem-20) auto 0;
  height: var(--rem-318);
  background-color: var(--z-bg-card);
  border-radius: var(--rem-16);
  box-sizing: border-box;
  border: 1.5px solid var(--border-prm);
  padding: var(--rem-20);
  overflow: hidden;
  h2{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--rem-18);
    &>div{
      width: 33%;
      text-align: center;
      color: var(--z-font-anti);
    }
  }
  .lottery-info-list-box{
    position: relative;
    margin-top: var(--rem-10);
    height: var(--rem-300);
    overflow: hidden;
    .lottery-info-list-wrapper{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      .swiper{
        height: 100%;
      }
    }
  }
}
.lottery-information{
  background-color: var(--z-bg-def);
  margin-top: var(--rem-20);
  border-radius: var(--rem-20);
  padding: var(--rem-20);
  box-sizing: border-box;
}
</style>
